<template>
	<view class="sleepDetail" :style="{ paddingTop: paddingHeight + 'px' }">
		<nav-bar title="睡眠记录" backgroundColor="#fff"></nav-bar>
		<view class="m-container">
			<view class="top-card">
				<view class="top_view">
					<view class="date_h">
						<u-image
							width="48rpx"
							height="48rpx"
							:showMenuByLongpress="false"
							@click="$u.throttle(dayReduceTap, 1000)"
							src="http://oss.antaimedical.com/images/pro/2025/02/67b53d20e4b0d615350f313dEKrtfsElllvJ87b7d6428720bc342605b9c886760068.png"
							:lazy-load="true"
						></u-image>
						<view class="date_m" @click="showCalendar_ = true">
							<text>{{ currentSearchTime }}</text>
						</view>
						<u-image
							width="48rpx"
							height="48rpx"
							:showMenuByLongpress="false"
							@click="$u.throttle(dayPlusTap, 1000)"
							src="http://oss.antaimedical.com/images/pro/2025/02/67b53d0fe4b0be9d44423447QSYIrP0e4a6H34c2497b89a3ddf79dbd7258097e400e.png"
							:lazy-load="true"
						></u-image>
					</view>
					<view class="tabs">
						<view
							@click="changeWeightTab(item.type)"
							class="tab"
							:class="{ current: currentType == item.type }"
							v-for="(item, index) in tabs"
							:key="index"
						>
							{{ item.text }}
						</view>
					</view>
				</view>
				<view class="charts">
					<myCharts
						:option="sleepOption"
						:formatterFn="formatterFn"
						@chartClick="chartClick"
					></myCharts>
				</view>
				<view class="tips">
					<u-image
						width="120rpx"
						height="120rpx"
						:showMenuByLongpress="false"
						:src="durationTypeImg[durationType]"
						:lazy-load="true"
					></u-image>
					<text class="text1">平均睡眠时长</text
					><text class="text">{{ sleepTime }}</text>
				</view>
			</view>
			<view class="b-card">
				<view class="b-header">
					<view>睡觉</view>
					<view>时长: {{ sleepDetail.duration || '--' }}</view>
				</view>
				<view class="con">
					<view class="item">
						<view class="item-l">休息时间</view>
						<view class="item-r">
							{{ sleepDetail.startTime || '--' }}
							<u-icon name="arrow-right" size="12"></u-icon>
						</view>
					</view>
					<view class="item">
						<view class="item-l">起床时间</view>
						<view class="item-r">
							{{ sleepDetail.endTime || '--' }}
							<u-icon name="arrow-right" size="12"></u-icon>
						</view>
					</view>
					<view class="item">
						<view class="item-l">白天状态</view>
						<view class="item-r" @click="popupShow = true">
							<text>{{
								sleepStatusObj[sleepDetail.sleepStatus] || '--'
							}}</text>
							<u-icon name="arrow-right" size="12"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<my-calendar
			:monthNum="36"
			:defaultDate="defaultDate"
			:maxDate="maxDate"
			@confirm="selectDate_"
			:minDate="minDate"
			:show="showCalendar_"
			color="#545DDE"
			closeOnClickOverlay
			@close="showCalendar_ = false"
		></my-calendar>
		<u-popup
			:show="popupShow"
			:round="10"
			mode="center"
			:safeAreaInsetBottom="false"
			@close="popupShow = false"
		>
			<view class="popup-con" v-if="popupShow">
				<view class="popup-header"> 清晨起床的感受 </view>
				<view class="con-icon">
					<image
						style="width: 96rpx; height: 72rpx"
						:src="imgObj[imgIndex]"
					></image>
				</view>
				<view class="con-box">
					<view class="progress-bg">
						<view
							class="item"
							style="background: rgba(255, 95, 95, 0.6)"
						>
						</view>
						<view class="item" style="background: #f77777"> </view>
						<view
							class="item"
							style="background: rgba(35, 200, 126, 0.4)"
						>
						</view>
						<view
							class="item"
							style="background: rgba(35, 200, 120, 0.6)"
						>
						</view>
						<view class="item" style="background: #23c87e"> </view>
					</view>
					<view class="text-list">
						<view
							class="item"
							:style="{ color: imgIndex == 0 ? '#1F2434' : '' }"
						>
							晕乎乎
						</view>
						<view
							class="item"
							:style="{ color: imgIndex == 1 ? '#1F2434' : '' }"
						>
							有点晕
						</view>
						<view
							class="item"
							:style="{ color: imgIndex == 2 ? '#1F2434' : '' }"
						>
							一般
						</view>
						<view
							class="item"
							:style="{ color: imgIndex == 3 ? '#1F2434' : '' }"
						>
							挺精神
						</view>
						<view
							class="item"
							:style="{ color: imgIndex == 4 ? '#1F2434' : '' }"
						>
							很满意
						</view>
					</view>
					<view style="margin-left: 20rpx">
						<cu-progress
							max="100"
							min="0"
							width="250px"
							strokeWidth="30"
							activeColor="transparent"
							noActiveColor="transparent"
							handleColor="transparent"
							handleIcon="sanjiao"
							handleSize="10"
							handleBorderRadius="0"
							:showInfo="false"
							borderRadius="20"
							@change="handleChangeMovable"
						></cu-progress>
					</view>
				</view>
				<view class="popup-btn">
					<view class="btn-l" @click="popupShow = false">取消</view>
					<view class="btn-r" @click="confirm">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {
	findSportComparison,
	findSportDataByDay,
	findSleepDayRecordByDay30,
	findSleepAvg30,
	findSleepDurationDay,
	findSleepDetails,
	updateSleepRecord30
} from '@/api/index.js'
import myCalendar from '@/components/myCalendar/myCalendar.vue'
import myCharts from '@/components/charts/myCharts.vue'
import cuProgress from '@/components/cu-progress/cu-progress.vue'
import { getItemColor, getWeekDate } from '@/utils/utils.js'
const dayjs = require('@/utils/dayjs.min.js')
export default {
	components: {
		myCalendar,
		myCharts,
		cuProgress
	},
	data() {
		return {
			paddingHeight: uni.getStorageSync('navbarHeight'),
			userId: uni.getStorageSync('userId'),
			defaultDate: [],
			maxDate: undefined,
			minDate: undefined,
			currentSearchTime: undefined, // 当前查询的时间
			showCalendar_: false, // 日历控件显示
			dataList: [], // 某一天数据
			currentType: 1,
			popupShow: false,
			sleepOption: {},
			durationTypeImg: {
				0: 'http://oss.antaimedical.com/images/pro/2025/02/67bd9a2ee4b0d615350f3144TY0ghjS02ssf4a245517860a6d5acd52edb273693936.png',
				1: 'http://oss.antaimedical.com/images/pro/2025/02/67b7f425e4b0d615350f313fGOukQR5JECwYc5ea009232e8b4dab816ea0a557f11c3.png',
				2: 'http://oss.antaimedical.com/images/pro/2025/02/67bd9a1fe4b0d615350f3143qV6c9GiS8s7P50f947f6515962d725935906778f86d4.png'
			},
			sleepData: {},
			tabs: [
				{
					type: 1,
					text: '日'
				},
				{
					type: 2,
					text: '周'
				},
				{
					type: 3,
					text: '月'
				}
			],
			imgObj: {
				0: 'http://oss.antaimedical.com/images/pro/2025/02/67b845b2e4b0be9d4442344aEcdZA16ZHQxof5a758bc3aa5915ce0968cba2c928d05.png',
				1: 'http://oss.antaimedical.com/images/pro/2025/02/67b845bee4b0be9d4442344bjQtlXXh5UKwwc36bcdf85d4339a414342396e916d438.png',
				2: 'http://oss.antaimedical.com/images/pro/2025/02/67b845cae4b0be9d4442344cz0RTwJosMtEn7a494b13edb06ba87aa9cc74efc06e93.png',
				3: 'http://oss.antaimedical.com/images/pro/2025/02/67b845d5e4b0d615350f3141ctAUpd2w0ppX1cc566139576c217bdad8cd0f083d0ee.png',
				4: 'http://oss.antaimedical.com/images/pro/2025/02/67b845e0e4b0d615350f3142oY9H921vNemyabbc48dfa406fea81d644ac72f0bf141.png'
			},
			imgIndex: 0,
			sleepTime: '',
			durationType: 1,
			sleepDetail: {},
			sleepStatusObj: {
				0: '晕乎乎',
				1: '有点晕',
				2: '一般',
				3: '挺精神',
				4: '很精神'
			}
		}
	},
	onLoad() {
		this.maxDate = dayjs().format('YYYY-MM-DD')
		this.minDate = dayjs(
			dayjs(this.maxDate).subtract(2, 'year').format('YYYY-MM-DD')
		).format('YYYY-MM-DD')
		this.currentSearchTime = dayjs().format('YYYY/MM/DD')
		this.defaultDate[0] = this.maxDate
	},
	onShow() {
		this.findSleepAvg30()
		this.fetchDayData()
	},
	methods: {
		handleChangeMovable(data) {
			if (data.value < 20) {
				this.imgIndex = 0
			} else if (data.value > 20 && data.value < 40) {
				this.imgIndex = 1
			} else if (data.value > 40 && data.value < 60) {
				this.imgIndex = 2
			} else if (data.value > 60 && data.value < 80) {
				this.imgIndex = 3
			} else if (data.value > 80 && data.value < 101) {
				this.imgIndex = 4
			}
		},
		changeWeightTab(type) {
			this.currentType = type
			if (type == '1') {
				this.currentSearchTime = dayjs(this.maxDate).format(
					'YYYY/MM/DD'
				)
				this.defaultDate[0] = this.maxDate
				this.fetchDayData()
			} else if (type == '2') {
				this.currentSearchTime = getWeekDate(this.maxDate)
				this.defaultDate[0] = this.maxDate
				this.fetchDayData()
				this.findSleepAvg30()
			} else if (type == '3') {
				this.currentSearchTime = dayjs().format('YYYY/MM')
				this.defaultDate[0] = this.maxDate
				this.fetchDayData()
				this.findSleepAvg30()
			}
		},
		chartClick(params) {
			if (params.data.id) {
				this.findSleepDetails(params.data.id)
			}
		},
		async fetchDayData() {
			if (this.currentType == '1') {
				this.findSleepDayRecordByDay30()
			} else if (this.currentType == '2') {
				this.findSleepDurationDay()
			} else if (this.currentType == '3') {
				this.findSleepDurationDay()
			}
		},
		// 修改睡醒状态
		confirm() {
			let params = {
				id: this.sleepDetail.id,
				startTime: this.sleepDetail.startFullTime,
				endTime: this.sleepDetail.endFullTime,
				sleepStatus: this.imgIndex,
				userId: this.userId
			}
			updateSleepRecord30(params).then((res) => {
				this.popupShow = false
				this.findSleepDetails(this.sleepDetail.id)
			})
		},
		// 获取图表坐标的睡眠数据
		findSleepDetails(id) {
			findSleepDetails({ id }).then((res) => {
				this.sleepDetail = res.data
				this.imgIndex = this.sleepDetail.sleepStatus
			})
		},
		// 平均时长
		findSleepAvg30() {
			let obj = {
				1: 'D', //日
				2: 'W', //周
				3: 'M' //月
			}
			let params = {
				time: this.defaultDate[0],
				type: obj[this.currentType] || 'W',
				userId: this.userId
			}
			findSleepAvg30(params).then((res) => {
				this.sleepTime = res.data.avgSleepDuration
				this.durationType = res.data.durationType
			})
		},
		// 周月图表展示
		findSleepDurationDay() {
			let obj = {
				1: 'D', //日
				2: 'W', //周
				3: 'M' //月
			}
			let params = {
				time: this.defaultDate[0],
				type: obj[this.currentType] || 'W',
				userId: this.userId
			}
			findSleepDurationDay(params).then((res) => {
				let option = {
					grid: {
						left: 0,
						right: 0,
						bottom: 0,
						top: '70',
						containLabel: true
					},
					dataZoom:
						this.currentDayType == 3
							? {
									id: '',
									type: 'inside',
									filterMode: 'none',
									orient: 'horizontal',
									start: 69,
									end: 100,
									maxValueSpan: 3600 * 24 * 1000 * 30,
									zoomLock: true
							  }
							: null,
					tooltip: {
						trigger: 'axis',
						backgroundColor: '#1F2434',
						showDelay: 0,
						textStyle: {
							color: '#fff',
							fontSize: '14'
						},
                        padding: [3, 10],
                        formatter: `{b}\n{c}`,
						position: ['50%', '0%']
					},
					xAxis: {
						type: 'category',
						axisLine: {
							//X轴刻度线样式
							show: true,
							lineStyle: {
								color: '#E6EBF5',
								width: 1
							}
						},

						axisTick: {
							show: false
						},
						axisLabel: {
							//X轴刻度线字体样式
							fontSize: 12,
							color: '#999999'
						},
						data: []
					},
					yAxis: [
						{
							type: 'value',
							splitLine: {
								show: false,
								lineStyle: {
									width: 1,
									color: '#E6EBF5',
									type: 'dashed'
								}
							},
							axisLine: {
								//Y轴刻度线样式
								show: true,
								lineStyle: {
									color: '#E6EBF5',
									width: 1
								}
							},
							min: 0, // Y轴刻度
							max: 24, // Y轴刻度
							interval: 12, // Y轴刻度
							axisLabel: {
								//Y轴刻度线字体样式
								margin: 4,
								formatter: '{value}:00',
								fontSize: 12,
								color: '#999999'
							},
							verticalAlign: 'middle'
						}
					],
					series: []
				}
				let seriesData = [
					{
						// name: '前',
						type: 'line',
						data: [],
						lineStyle: {
							color: '#23C89E',
							width: 2 // 线宽
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: 'rgba(190,239,227,0.8)'
									},
									{
										offset: 0.85,
										color: 'rgba(255,255,255,0)'
									}
								],
								global: false // 缺省为 false
							}
						},

						smooth: true
					}
				]
				let arrData = res.data.map((val, index) => {
					return {
						value: val.durationMinute / 60,
						durationMinute: val.durationMinute,
						id: val.id,
						itemStyle: {
							color: '#23C89E',
							borderWidth: '0'
						}
					}
				})
				seriesData[0].data = arrData
				option.xAxis.data = res.data.map((val, index) => {
					return dayjs(val.sleepDay).format('MM/DD')
				})
				if (!res.data.length) {
					let dayArr = []
					for (let index = 0; index < 7; index++) {
						let day = dayjs(this.defaultDate[0])
							.subtract(7 - index, 'day')
							.format('MM/DD')
						dayArr.push(day)
					}
					option.xAxis.data = dayArr
					option['showChart'] = true
				} else {
					option['showChart'] = false
				}
				option.series = seriesData
				this.sleepOption = option
			})
		},
		//睡眠展示 日
		findSleepDayRecordByDay30() {
			let params = {
				time: dayjs(this.defaultDate[0]).format('YYYY-MM-DD'),
				userId: this.userId
			}
			findSleepDayRecordByDay30(params).then((res) => {
				let option = {
					showChart: true,
					grid: {
						left: 0,
						right: 0,
						bottom: 0,
						top: '70',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						// showContent: false,
						backgroundColor: '#1F2434',
						showDelay: 0,
						textStyle: {
							color: '#fff',
							fontSize: '14'
						},
                        padding: [3, 10],
                        formatter: `{b}\n{c}`,
                        formatterFn: true,
						position: ['50%', '0%']
					},
					xAxis: {
						type: 'category',
						axisLine: {
							//X轴刻度线样式
							show: true,
							lineStyle: {
								color: '#E6EBF5',
								width: 1
							}
						},

						axisTick: {
							show: false
						},
						axisLabel: {
							//X轴刻度线字体样式
							fontSize: 12,
							color: '#999999'
						},
						data: ['休息时间', '起床时间']
					},
					yAxis: [
						{
							type: 'value',
							splitLine: {
								show: false,
								lineStyle: {
									width: 1,
									color: '#E6EBF5',
									type: 'dashed'
								}
							},
							axisLine: {
								//Y轴刻度线样式
								show: true,
								lineStyle: {
									color: '#E6EBF5',
									width: 1
								}
							},
							min: 0, // Y轴刻度
							max: 24, // Y轴刻度
							interval: 12, // Y轴刻度
							axisLabel: {
								//Y轴刻度线字体样式
								margin: 4,
								formatter: '{value}:00',
								fontSize: 12,
								color: '#999999'
							},
							verticalAlign: 'middle'
						}
					],
					series: [
						{
							// name: '前',
							type: 'line',
							data: [],
							lineStyle: {
								color: '#23C89E',
								width: 2 // 线宽
							},
							areaStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [
										{
											offset: 0,
											color: 'rgba(190,239,227,0.8)'
										},
										{
											offset: 0.85,
											color: 'rgba(255,255,255,0)'
										}
									],
									global: false // 缺省为 false
								}
							},
							smooth: true
						}
					]
				}
				if (res.data) {
					option.showChart = false
					this.findSleepDetails(res.data.id)
					this.sleepData = res.data
					const { startTime, endTime } = res.data
					let arr = [
						{
							value: dayjs(startTime).format('HH'),
							time: dayjs(startTime).format('HH:mm'),
							itemStyle: {
								color: '#23C89E',
								borderWidth: '0'
							}
						},
						{
							value: dayjs(endTime).format('HH'),
							time: dayjs(endTime).format('HH:mm'),
							itemStyle: {
								color: '#23C89E',
								borderWidth: '0'
							}
						}
					]

					option.series[0].data = arr
				} else {
					option.showChart = true
				}
				this.sleepOption = option
			})
		},
        // tooltip 提示格式化函数
        formatterFn(params, ticket, callback){
            console.log("%c Line:683 🥑 params", "color:#ffdd4d", params);
			return `${params[0].name}\n${params[0].data.time}`;
        },
		// 上一个选项
		dayReduceTap() {
			let min = dayjs(this.minDate).format('YYYY/MM/DD')
			if (this.currentType == 1) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					// 比对前一天是否是最小天数的前一天
					this.currentSearchTime = pre
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchDayData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 2) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime = getWeekDate(pre)
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchDayData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 3) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(1, 'month')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime = dayjs(pre).format('YYYY/MM')
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchDayData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		// 下一个选项
		dayPlusTap() {
			let max = dayjs(this.maxDate).format('YYYY/MM/DD')
			if (this.currentType == 1) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					// 比对后一天是否是最大天数的后一天
					this.currentSearchTime = next
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchDayData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 2) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime = getWeekDate(next)
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchDayData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 3) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(1, 'month')
				).format('YYYY/MM')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime = dayjs(next).format('YYYY/MM')
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchDayData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		// 最大可选某天控件
		selectDate_(e) {
			this.showNumDetails = false
			this.defaultDate[0] = e[0]
			if (this.currentType == 1) {
				// 单个日期
				this.currentSearchTime = e[0].replaceAll('-', '/')
			} else if (this.currentType == 2) {
				this.currentSearchTime = getWeekDate(e[0])
			} else if (this.currentType == 3) {
				this.currentSearchTime = dayjs(e[0]).format('YYYY/MM')
			}
			this.fetchDayData()
			this.showCalendar = false
		}
	}
}
</script>
<style lang="scss">
page {
	background-color: #f3f4f7 !important;
	min-height: 100vh;

	.u-popup__content {
		border-top-left-radius: 128rpx;
	}

	.u-popup__content__close {
		top: 48rpx !important;
		right: 48rpx !important;

		.u-icon__icon {
			font-size: 28rpx !important;
		}
	}
}
</style>
<style lang="scss" scoped>
.sleepDetail {
	padding: 0 0 48rpx;
	.m-container {
		.top-card {
			background-color: #fff;
			padding-bottom: 36rpx;
			margin-bottom: 20rpx;
			.charts {
				margin: 0 30rpx;
                margin-top: 10rpx;
				height: 460rpx;
			}
			.tips {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #1f2434;
				margin-top: 50rpx;
				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 42rpx;
					color: #23c89e;
					margin: 0 10rpx;
				}
				.text1 {
					margin-left: 10rpx;
				}
				.text2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: #1f2434;
				}
			}
		}
		.tabs {
			width: 100%;
			height: 66rpx;
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			background: #f3f4f7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			.tab {
				width: 33.3%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(31, 36, 52, 0.5);
				line-height: 38rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				border-right: 2rpx solid #d0d0d0;
				&:last-child {
					border-right: 0;
				}
			}
			.current {
				font-weight: 600;
				font-size: 26rpx;
				color: #1f2434;
			}
		}
		.top_view {
			margin: 0 46rpx;

			.date_h {
				padding: 48rpx 0 32rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.date_m {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: rgba(31, 36, 52, 0.5);
					text-align: center;
				}

				.next_p,
				.pre_p {
					background-color: #545dde;
				}

				.iconfont {
					font-size: 18rpx;
					color: #fff;
				}
			}
		}
		.b-card {
			background: #fff;
			.b-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 26rpx 26rpx 26rpx 30rpx;
				border-bottom: 2rpx solid #f4f4f4;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #1f2434;
			}
			.con {
				padding: 0 30rpx;
				.item {
					padding: 30rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #f4f4f4;
					&:last-child {
						border-bottom: 0;
					}
					.item-l {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #1f2434;
					}
					.item-r {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(31, 36, 52, 0.5);
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
	.popup-con {
		padding: 50rpx;
		.popup-header {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #1f2434;
			margin: 0 auto;
		}
		.con-box {
			margin: 36rpx 0 74rpx 0;
			position: relative;
			.progress-bg {
				width: 480rpx;
				height: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				overflow: hidden;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				.item {
					width: 20%;
					height: 16rpx;
				}
			}
			.text-list {
				width: 480rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				overflow: hidden;
				position: absolute;
				top: calc(50% + 40rpx);
				left: 50%;
				transform: translate(-50%, -50%);
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: rgba(31, 36, 52, 0.5);
				.item {
					width: 20%;
				}
			}
		}
		.con-icon {
			width: 96rpx;
			height: 72rpx;
			margin: 36rpx auto 10rpx;
		}
		.popup-btn {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.btn-l {
				width: 228rpx;
				height: 78rpx;
				background: rgba(31, 36, 52, 0.5);
				border-radius: 46rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.btn-r {
				width: 228rpx;
				height: 78rpx;
				background: #1f2434;
				border-radius: 46rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
</style>
